<template>
    <section class="app-container">
        <!--筛选条件-->
        <div class="app-left">
            <el-card class="app-card box-card">
                <div class="app-card-content">
                    <el-form :model="fetchParams" ref="queryRef" :inline="true">
                        <el-form-item label="模板名称" prop="templateName">
                            <el-input
                                v-model="fetchParams.templateName"
                                placeholder="请输入模板名称"
                                clearable
                                style="width: 240px"
                            />
                        </el-form-item>
                        <el-form-item label="消息标题" prop="title">
                            <el-input
                                v-model="fetchParams.title"
                                placeholder="请输入消息标题"
                                clearable
                                style="width: 240px"
                            />
                        </el-form-item>
                        <el-form-item label="模版创建时间" style="width: 380px">
                            <el-date-picker
                                v-model="dateRange"
                                value-format="YYYY-MM-DD HH:mm:ss"
                                type="daterange"
                                range-separator="-"
                                start-placeholder="开始日期"
                                end-placeholder="结束日期"
                                :default-time="[
                                    new Date(2023, 7, 1, 0, 0, 0),
                                    new Date(2023, 8, 1, 23, 59, 59),
                                ]"
                            ></el-date-picker>
                        </el-form-item>

                        <el-form-item>
                            <el-button type="primary" icon="Search" @click="handleResetPage"
                                >查询</el-button
                            >
                            <el-button icon="Refresh" @click="resetQuery(queryRef)">重置</el-button>
                        </el-form-item>
                    </el-form>
                </div>
            </el-card>
        </div>
        <!--筛选条件-->
        <div class="app-right">
            <el-card class="app-card box-card">
                <div class="segmentation-module segmentation-module2">消息模板管理</div>
                <div class="app-card-content">
                    <el-row :gutter="10" class="mb8">
                        <el-col :span="1.5">
                            <el-button type="primary" icon="Plus" @click="handleAdd"
                                >创建模板</el-button
                            >
                            <el-button
                                type="danger"
                                style="height: 32px; line-height: 10px"
                                :disabled="checkIds.length === 0"
                                @click="delTemplate"
                                >删除</el-button
                            >
                        </el-col>
                        <right-toolbar @queryTable="fetchData"></right-toolbar>
                    </el-row>
                    <CommonTable
                        :tableColumns="tableColumns"
                        :table-data="tableData"
                        :total="total"
                        :loading="loading"
                        :is-show-toolbar="false"
                        :is-show-selection="true"
                        :is-show-selection-info="true"
                        @selection-change="handleSelectionChange"
                        :page-num.sync="fetchParams.pageNum"
                        :page-size.sync="fetchParams.pageSize"
                        :selectable="selectable"
                    >
                        <template #operation="{ scope }">
                            <el-button text type="primary" @click.stop="handleSend(scope.row)"
                                >发送消息</el-button
                            >
                            <el-button text type="primary" @click.stop="handleEdit(scope.row)"
                                >修改</el-button
                            >
                        </template>
                    </CommonTable>
                </div>
            </el-card>
            <AddDialog ref="addDialogRef" @submit="handleResetPage" />
            <SendDialog ref="sendDialogRef" @submit="handleResetPage" />
        </div>
    </section>
</template>
<script lang="ts" setup>
import type { FormInstance } from 'element-plus';
import { reactive, ref } from 'vue';

import { deleteTemplate, getTemplateList } from '@/api/template';
import CommonTable from '@/components/CommonTable/index.vue';
const message = useMessage(); // 消息弹窗
import AddDialog from './_comp/AddDialog.vue';
import SendDialog from './_comp/SendDialog.vue';
const addDialogRef = ref();
const sendDialogRef = ref();
const checkIds = ref([]);
const tableColumns = [
    { prop: 'id', label: '模板ID', fixed: true, ellipsis: true },
    { prop: 'templateName', label: '模板名称', fixed: true, ellipsis: true },
    { prop: 'templatePlatform', label: '系统平台' },
    { prop: 'title', label: '消息标题' },
    { prop: 'content', label: '模板内容' },
    { prop: 'templateIndex', label: '模板key值', fixed: true, ellipsis: true },
    { prop: 'msgTypeCode', label: '消息类型', align: 'center' },
    { prop: 'messageUrl', label: '消息链接' },
    { prop: 'picUrl', label: '图片链接' },
    {
        prop: 'operation',
        label: '操作',
        minWidth: 120,
        fixed: 'right',
        align: 'center',
        slot: 'operation',
    },
];
const dateRange = ref('');
const queryRef = ref<FormInstance>();
const loading = ref(false);
const total = ref(0);
const fetchParams = reactive({
    pageNum: 1,
    pageSize: 10,
    templateName: '',
    createEndTime: '',
    createStartTime: '',
    title: '',
});
const handleResetPage = () => {
    fetchParams.pageNum = 1;
    fetchData();
};
const fetchData = async () => {
    loading.value = true;
    try {
        const fetchRes = await getTemplateList(fetchParams);
        tableData.value = fetchRes.records || [];
        total.value = fetchRes.total;
    } catch (error) {
    } finally {
        loading.value = false;
    }
};
onMounted(() => {
    handleResetPage();
});
// 监听日期格式
watch(dateRange, (newVal) => {
    if (newVal) {
        fetchParams.createStartTime = newVal[0];
        fetchParams.createEndTime = newVal[1];
    }
});
const tableData = ref([]);
const handleSend = (row) => {
    sendDialogRef.value.open(row.id, row.templateName);
};
const handleAdd = () => {
    addDialogRef.value.open('', 'add', '添加模版');
    //
};
// 修改
const handleEdit = (row) => {
    addDialogRef.value.open(row.id, 'edit', '修改模版');
};
/** 删除模版 */
const delTemplate = async () => {
    try {
        await message.confirm('确定删除?');
        await deleteTemplate(checkIds.value);
        message.success('删除成功');
        fetchData();
    } catch (error) {}
};
/** 多选 */
const selectable = () => {
    return true;
};
/**
 * 多选变化
 * @param rows 选中项
 */
const handleSelectionChange = (rows) => {
    checkIds.value = rows.map((row) => row.id);
};
//清除校验效果并且清空表单参数的函数
const resetQuery = (formEl: FormInstance | undefined) => {
    if (!formEl) return;
    formEl.resetFields();
    dateRange.value = '';
    fetchParams.createStartTime = '';
    fetchParams.createEndTime = '';
    handleResetPage();
};
</script>
